<script setup>
import {onMounted} from "vue";

function getCanvas(elementId = "myCanvas") {
  var canvas = document.getElementById(elementId);
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
  var ctx = canvas.getContext("2d");
  //创建小球的构造函数
  function Ball() {
    this.x = randomNum(3, canvas.width - 3);
    this.y = randomNum(3, canvas.height - 3);
    this.r = randomNum(1, 3);
    this.color = randomColor();
    this.speedX = randomNum(-3, 3) * 0.2;
    this.speedY = randomNum(-3, 3) * 0.2;
  }
  Ball.prototype = {
    //绘制小球
    draw: function() {
      ctx.beginPath();
      ctx.globalAlpha = 1;
      ctx.fillStyle = this.color;
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
      ctx.fill();
    },
    //小球移动
    move: function() {
      this.x += this.speedX;
      this.y += this.speedY;
      //为了合理性,设置极限值
      if(this.x <= 3 || this.x > canvas.width - 3) {
        this.speedX *= -1;
      }
      if(this.y <= 3 || this.y >= canvas.height - 3) {
        this.speedY *= -1;
      }
    }
  };
  //存储所有的小球
  var balls = [];
  //创建200个小球
  for(var i = 0; i < 150; i++) {
    var ball = new Ball();
    balls.push(ball);
  }
  main();

  function main() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //鼠标移动绘制线
    mouseLine();
    //小球与小球之间自动画线
    drawLine();
    //使用关键帧动画，不断的绘制和清除
    window.requestAnimationFrame(main);
  }
  //添加鼠标移动事件
  //记录鼠标移动时的mouseX坐标
  var mouseX;
  var mouseY;
  canvas.onmousemove = function(e) {
    var ev = event || e;
    mouseX = ev.offsetX;
    mouseY = ev.offsetY;
  }
  //判断是否划线

  function drawLine() {
    for(var i = 0; i < balls.length; i++) {
      balls[i].draw();
      balls[i].move();
      for(var j = 0; j < balls.length; j++) {
        if(i != j) {
          if(Math.sqrt(Math.pow((balls[i].x - balls[j].x), 2) + Math.pow((balls[i].y - balls[j].y), 2)) < 80) {
            ctx.beginPath();
            ctx.moveTo(balls[i].x, balls[i].y);
            ctx.lineTo(balls[j].x, balls[j].y);
            ctx.strokeStyle = "white";
            ctx.globalAlpha = 0.2;
            ctx.stroke();
          }
        }
      }
    }
  }
  //使用鼠标移动划线
  function mouseLine() {
    for(var i = 0; i < balls.length; i++) {
      if(Math.sqrt(Math.pow((balls[i].x - mouseX), 2) + Math.pow((balls[i].y - mouseY), 2)) < 80) {
        ctx.beginPath();
        ctx.moveTo(balls[i].x, balls[i].y);
        ctx.lineTo(mouseX, mouseY);
        ctx.strokeStyle = "white";
        ctx.globalAlpha = 0.8;
        ctx.stroke();
      }
    }
  }
  //随机函数
  function randomNum(m, n) {
    return Math.floor(Math.random() * (n - m + 1) + m);
  }
  //随机颜色
  function randomColor() {
    return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
  }
}

onMounted(async () => {
  getCanvas("myCanvas")
})
</script>
<template>
  <div class="height100 width100 flex-center out">
    <canvas id="myCanvas"></canvas>
    <div class="flex-center height100 width100 inner">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.out {
  overflow: hidden;

  .inner {
    position: absolute;
    top: 0;
    left: 0;

  }

}
</style>